<template>
  <div>
    <div style="width: 100%">
      <el-button @click="add" type="text" size="small" icon="el-icon-document-add">添加</el-button>
    </div>
    <el-table class="table-class" border :data="infoList" style="width: 100%" v-if="infoList&&infoList.length>0">
      <el-table-column prop="id" label="序号" width="50" type="index" align="center"
                       :index="index=>index+1"/>
      <el-table-column prop="material" label="物料" align="center">
        <template #default="scope">
          <span v-show="!scope.row.editFlag">{{scope.row.material}}</span>
          <el-input size="small" v-show="scope.row.editFlag"
                    v-model="scope.row.material">
          </el-input>
        </template>
      </el-table-column>
      <el-table-column prop="brand" label="品牌" align="center">
        <template #default="scope">
          <span v-show="!scope.row.editFlag">{{scope.row.brand}}</span>
          <el-input size="small" v-show="scope.row.editFlag"
                    v-model="scope.row.brand">
          </el-input>
        </template>
      </el-table-column>
      <el-table-column prop="planned" label="计划交齐" align="center">
        <template #default="scope">
          <span v-show="!scope.row.editFlag">{{scope.row.planned|timestampToTime}}</span>
          <el-date-picker
            size="small"
            v-show="scope.row.editFlag"
            v-model="scope.row.planned"
            type="date"
            placeholder="选择计划交齐"
            format="yyyy-MM-dd"
            value-format="timestamp">
          </el-date-picker>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="actual" label="实际交齐" align="center">
        <template #default="scope">
          <span v-show="!scope.row.editFlag">{{scope.row.actual|timestampToTime}}</span>
          <el-date-picker
            size="small"
            v-show="scope.row.editFlag"
            v-model="scope.row.actual"
            type="date"
            placeholder="选择实际交齐"
            format="yyyy-MM-dd"
            value-format="timestamp">
          </el-date-picker>
        </template>
      </el-table-column> -->
      <el-table-column prop="condition" label="料况" align="center">
        <template #default="scope">
          <span v-show="!scope.row.editFlag">{{scope.row.condition}}</span>
          <el-input size="small" v-show="scope.row.editFlag"
                    v-model="scope.row.condition">
          </el-input>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" align="center">
        <template #default="scope">
          <span v-show="!scope.row.editFlag">{{scope.row.remark}}</span>
          <el-input size="small" v-show="scope.row.editFlag"
                    v-model="scope.row.remark">
          </el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120" align="center">
        <template #default="scope">
          <div style="display: flex;" :class="{'flex-box':isAdd}">
            <el-button size="small"
                       type="text"
                       icon="CircleCheck"
                       v-show="scope.row.editFlag"
                       class="mgl10"
                       v-if="!isAdd"
                       @click="submit(scope.row)">确定
            </el-button>
            <el-button size="small"
                       type="text"
                       icon="CircleClose"
                       v-show="scope.row.editFlag"
                       @click="cancel(scope.row,scope.$index)">
                       {{isAdd ? '删除' : '取消'}}
            </el-button>
            <el-button size="small"
                       icon="Edit"
                       type="text"
                       v-show="!scope.row.editFlag"
                       @click="editVersion(scope.row)"> 编辑
            </el-button>
            <el-button size="small"
                       icon="Delete"
                       type="text"
                       v-show="!scope.row.editFlag"
                       @click="delVersion(scope.$index)">删除
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "TableCustom",
  props: {
    tableCustomList: {
      type: Array,
      default: ()=>{
        return []
      }
    },
    isAdd: {
      type: Boolean,
      default: false
    },
    materiallistClear: {
      type: Boolean,
      default: false
    },
  },
  data() {
     return {
       infoList:[],
       v: null,
     }
  },
  mounted() {
    this.getList()
  },
  watch:{
    isAdd(oldVal,newVal){
      if(newVal != oldVal){
        this.getList()
      }
    },
    materiallistClear(oldVal,newVal){
      if(newVal != oldVal){
        this.getList()
      }
    },
  },
  methods:{
    getList(){
      let materiallist = [];
      if(!this.isAdd){
        materiallist = this.tableCustomList || []
      } else {
        materiallist = [
          {
            actual: "",
            brand: "",
            condition: null,
            material: "屏幕",
            planned: "",
            remark: null,
          },
          {
            actual: "",
            brand: "",
            condition: null,
            material: "板卡",
            planned: "",
            remark: null,
          },
          {
            actual: "",
            brand: "",
            condition: null,
            material: "TP",
            planned: "",
            remark: null,
          },
          {
            actual: "",
            brand: "",
            condition: null,
            material: "电池",
            planned: "",
            remark: null,
          },
          {
            actual: "",
            brand: "",
            condition: null,
            material: "摄像头",
            planned: "",
            remark: null,
          },
          {
            actual: "",
            brand: "",
            condition: null,
            material: "扬声器",
            planned: "",
            remark: null,
          },
          {
            actual: "",
            brand: "",
            condition: null,
            material: "天线",
            planned: "",
            remark: null,
          },
          {
            actual: "",
            brand: "",
            condition: null,
            material: "结构",
            planned: "",
            remark: null,
          },
          {
            actual: "",
            brand: "",
            condition: null,
            material: "充电器",
            planned: "",
            remark: null,
          },
          {
            actual: "",
            brand: "",
            condition: null,
            material: "排线",
            planned: "",
            remark: null,
          },
          {
            actual: "",
            brand: "",
            condition: null,
            material: "样机",
            planned: "",
            remark: null,
          },
          {
            actual: "",
            brand: "",
            condition: null,
            material: "软件",
            planned: "",
            remark: null,
          },
        ]
      }
      if(materiallist&&materiallist.length>0){
        this.infoList = materiallist.map((item)=>{
          return {
            ...item,
            'editFlag': this.isAdd ? true : false,  // 可编辑标识
            'isSubmit': false, // 是否点击确定标识
          }
        })
      }
    },
    //点击添加
    add() {
      let nullCustomObj = {
        actual: "",
        brand: "",
        condition: null,
        material: "",
        planned: "",
        remark: null,
      }
      this.infoList.push({
        ...nullCustomObj,
        'editFlag': true,  // 可编辑标识
        'isSubmit': false, // 是否点击确定标识
      })
      this.$emit('submit',this.infoList)
      // console.log("this.infoList",this.infoList)
    },
    // 确定
    submit(row) {
      row.editFlag = false
      row.isSubmit = true
      let list = this.infoList.map((item)=>{
        return item
      })
      this.$emit('submit',list)
    },
    // 取消
    cancel(row, index) {
      row.editFlag = false
      if (row.isSubmit) {
        this.infoList[index] = this.v
      } else {
        if(this.isAdd){
          this.delVersion(index);
        }
      }
    },
    // 编辑
    editVersion(row) {
      this.v = JSON.parse(JSON.stringify(row));
      row.editFlag = true;
    },
    // 删除
    delVersion(index) {
      this.infoList.splice(index, 1)
      this.$emit('submit',this.infoList)
    },
    // 确定全部
    submitAll() {
      return new Promise((resove)=>{
        this.infoList = this.infoList.map((item)=>{
          return {
            ...item,
            editFlag: false,
            isSubmit: true
          }
        })
        let list = this.infoList.map((item)=>{
          return item
        })
        // console.log('list',list)
        this.$emit('submit',list)
        resove()
      })
    },

  }
}
</script>

<style lang="less" scoped>
.flex{
  display: flex;
}
.flex-box{
  display: flex;
  align-items: center;
  justify-content: center;
}

</style>
